<template>
  <div ref="mapEcharts" class="map-echart">
  </div>
</template>

<script>
import echarts from 'echarts'
import China from "../../public/china";

export default {
  name: "Map",
  data() {
    return {
      timer: null,
      seriesData: [],
      map: null
    }

  },
  created() {

  },
  methods: {
    initEcharts() {
      // 获取地图数据

      // 使用数据注册地图
      echarts.registerMap('chongqing', China)
      this.$nextTick(() => {
        // 初始化地图
        this.map = echarts.init(this.$refs['mapEcharts'])
        // 设置基础配置项
        const option = {
          // 标题
          title: {
            left: 'center',
          },
          // 悬浮窗
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              console.log(2222, params);
              return `${params.name}: ${params.value || 0}`

            }
          },
          // 要显示的散点数据
          series: [
            {
              type: 'map',
              zoom: 1.2,
              map: 'chongqing',
              mapType: 'jiangsu',
              // 这是要显示的数据
              data: this.seriesData,
              roam: true,
              itemStyle: {
                normal: {
                  label: {show: true, color: "#666666"},
                  opacity: 1,              //图形透明度 0 - 1
                  borderColor: "#E8E8E8",  //图形的描边颜色
                  borderWidth: 2,          //描边线宽。为 0 时无描边。
                  borderType: 'solid',     //柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                  areaColor: "#87C0F5",   //图形的颜色 #eee
                },
                emphasis: {
                  label: {show: true, color: "#666666"},
                  areaColor: "#3587EE",   //图形的颜色 #eee
                }
              },
            },

          ]
        }
        // 将配置应用到地图上
        this.map.setOption(option)
        // 设置定时器，自动循环触发tooltip悬浮窗事件
        this.setTimer()
        let that = this;
        // 当鼠标在地图上时，停止自动tooltip事件
        this.map.on('mouseover', {series: 0,}, function (params) {
          that.clearTimer()
        })
        // 当鼠标移出地图后，再自动tooltip
        this.map.on('mouseout', {series: 0}, function (params) {
          that.setTimer()
        })
      })

    },
    setTimer() {
      // 当前选中区域的下标
      let curIndex = -1;
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(() => {
        const len = this.seriesData.length;
        // dispatchAction是主动去触发echarts事件，取消高亮当前的数据图形
        this.map.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: curIndex
        })
        // 下一个选中区域的下标
        curIndex = (curIndex + 1) % len;
        // 高亮下一个数据图形
        this.map.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: curIndex
        })
        // 显示tooltip
        this.map.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: curIndex
        })
      }, 1000)
    },
    clearTimer() {
      this.timer && clearInterval(this.timer)
    }
  },
  mounted() {
    this.initEcharts()
  },
  beforeDestroy() {
    this.clearTimer()
  }
}
</script>

<style>
.map-echart {
  width:100vw;
  height:100vh;
}
</style>
